<template>
	<el-container>
		<el-aside width="200px">
            <div class="g-logo">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="">
                <p>竞赛系统</p>
            </div>
			<el-menu
				background-color="#1e2e3d"
				text-color="#fff"
				active-text-color="#ffd04b"
				@open="handleOpen"
				@close="handleClose"
			>
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>导航一</span>
					</template>
					<el-menu-item-group>
						<template slot="title">分组一</template>
						<el-menu-item index="1-1">选项1</el-menu-item>
						<el-menu-item index="1-2">选项2</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group title="分组2">
						<el-menu-item index="1-3">选项3</el-menu-item>
					</el-menu-item-group>
					<el-submenu index="1-4">
						<template slot="title">选项4</template>
						<el-menu-item index="1-4-1">选项1</el-menu-item>
					</el-submenu>
				</el-submenu>
				<el-menu-item index="2">
					<i class="el-icon-menu"></i>
					<span slot="title">导航二</span>
				</el-menu-item>
				<el-menu-item index="3" disabled>
					<i class="el-icon-document"></i>
					<span slot="title">导航三</span>
				</el-menu-item>
				<el-menu-item index="4">
					<i class="el-icon-setting"></i>
					<span slot="title">导航四</span>
				</el-menu-item>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
                <h4>首页/商城系统/Banner</h4>
            </el-header>
			<el-main>Main</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {}
</script>

<style lang="css" scoped>
.el-container{
    height: 100vh;
    background-color: #fafafa;
}

.el-aside{
    background-color: #314157;
}
.el-aside .g-logo{
    display: flex;
    height: 100px;
    align-items: center;
    padding-left: 20px;
}
.el-aside .g-logo img{
    width: 30px;
    padding-right: 10px;
}
.el-aside .g-logo p{
    color: white;
}

.el-header{
    height: 70px;
    background-color: #ffffff;
    border-bottom: 2px solid #e1e1e5
}

.el-header h4{
    height: 70px;
    line-height: 70px;
    color: #606266;
}
</style>
